<template>
	<!-- 模板内容不变，与原代码一致 -->
	<view class="message-list-container">
		<!-- 标题栏 -->
		<view class="message-header" style="display: flex; justify-content: space-between">
			<view>
				<text class="header-title">留言列表</text>
				<text class="header-count">{{ dataList.length }} 条留言</text>
			</view>
			<view>
				<view class="bottom-action" @click="handleShowComment(false)">
					写留言
				</view>
			</view>
		</view>
		<view class="message-header">
			<!-- 新增搜索区域 -->
			<view style="display: flex; align-items: center">
				<u-input placeholder="请输入想要搜索留言的标题" border="surround" v-model="form.title" clearable
					@change="clickSearch">
				</u-input>
				<view class="bottom-action" @click="clickSearch"> 搜索 </view>
			</view>
		</view>
		<scroll-view class="function-scroll" scroll-y @scrolltolower="buttonScrolltolower"
			style="height: calc(100vh - 47vh)">
			<view class="message-list">
				<!-- 留言项 - 循环渲染 -->
				<view class="message-item" v-for="(item, index) in dataList" :key="index"
					:class="{ 'last-item': index === dataList.length - 1 }" @click="liuYanClick(item.id)">
					<!-- 头像和用户信息 -->
					<view class="user-info">
						<view v-if="item.title" class="avatar" :style="{ backgroundColor: stringToColor(item.title) }">
							<text class="avatar-text">{{ item.title.charAt(0) }}</text>
						</view>
						<view class="user-detail">
							<view class="username">
								<span v-if="item.zhu_ti_name"> [{{ item.zhu_ti_name }}] </span>
								<span style="font-weight: bold; font-size: 35rpx">{{ item.title }}
								</span>
							</view>
							<view class="username">{{ item.username }}</view>
							<!-- <view class="time">{{ formatTime(item.createTime) }}</view> -->
							<view class="time">{{ item.time }}</view>
						</view>
					</view>
					<!-- 留言内容 -->
					<view class="message-content">
						<text>{{ item.content }}</text>
					</view>
				</view>

				<!-- 空状态 -->
				<view class="empty-state" v-if="dataList.length === 0">
					<view class="empty-icon">💬</view>
					<view class="empty-text">暂无留言，快来抢沙发吧~</view>
				</view>
			</view>
		</scroll-view>

		<!-- 留言列表 -->
		<liuYanPing :showCommentPopup="showCommentPopup" @UpClose="UpClose" />
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		onMounted,
		computed
	} from "vue";
	import UuEmojiInput from "@/components/uu-emoji-input/uu-emoji-input.vue";
	import {
		getLiuYan
	} from "@/api/news.js";
	import {
		showToast,
		showLoading,
		hideLoading,
		showModalNoCancel,
		showModal,
	} from "@/utils/toast";
	// 集中管理所有状态
	const state = reactive({
		isReplyMode: false,
		replyTarget: null,
		SysLabelList: [],
		showCommentPopup: false,
		count: 0,
		form: {
			title: "",
			page_no: 1,
			page_size: 10,
			page_count: 1,
		},

		dataList: [],
	});
	onMounted(async () => {
		await init();
	});
	const init = async () => {
		try {
			const res = await getLiuYan(form.value);
			state.count = res.data.count;
			dataList.value = [...dataList.value, ...res.data.list];
			// console.log(res);
		} catch (error) {}
	};
	// await init();
	// 使用toRefs解构，保持响应式
	const {
		isReplyMode,
		replyTarget,
		showCommentPopup,
		dataList,
		form
	} =
	toRefs(state);

	const handleShowComment = async (mode, target = null) => {
		isReplyMode.value = mode;
		replyTarget.value = target;
		showCommentPopup.value = true;
	};
	const liuYanClick = (e) => {
		uni.navigateTo({
			url: `/pages_index/news/component/LiuYanItem?id=${e}`
		});
	};
	const UpClose = async () => {
		showCommentPopup.value = false;
	};

	const stringToColor = (str) => {
		let hash = 0;
		for (let i = 0; i < str.length; i++) {
			hash = str.charCodeAt(i) + ((hash << 5) - hash);
		}
		const c = (hash & 0x00ffffff).toString(16).toUpperCase();
		return `#${"00000".substring(0, 6 - c.length)}${c}`;
	};
	const buttonScrolltolower = async () => {
		if (state.count != dataList.value.length) {
			form.value.page_no++;
			showLoading("加载中");
			await init();
		} else {
			showToast("已经最后一页了~");
		}
	};
	// 新增：清空搜索框
	const clickSearch = async () => {
		form.value.page_no = 1;
		await init();
	};
</script>
<style lang="scss" scoped>
	.message-list-container {
		background-color: #f5f7fa;
		padding-bottom: 120rpx;

		.message-header {
			padding: 30rpx 20rpx;
			background-color: #fff;
			border-bottom: 1px solid #eee;

			.header-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}

			.header-count {
				margin-left: 15rpx;
				font-size: 26rpx;
				color: #999;
			}
		}

		.bottom-action {
			background: #137ad3;
			color: white;
			border: none;
			border-radius: 20px;
			padding: 5px 16px;
			font-size: 12px;
			cursor: pointer;
			transition: all 0.3s ease;
			margin-left: 8px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

			&:hover {
				background: #40a9ff;
				transform: translateY(-1px);
				box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
			}

			&:active {
				background: #096dd9;
				transform: translateY(0);
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
			}
		}

		.message-list {
			padding: 20rpx;

			.message-item {
				background-color: #fff;
				border-radius: 16rpx;
				padding: 25rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

				&.last-item {
					margin-bottom: 0;
				}

				.user-info {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.avatar {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 20rpx;

						.avatar-text {
							color: #fff;
							font-size: 30rpx;
							font-weight: bold;
						}
					}

					.user-detail {
						flex: 1;

						.username {
							font-size: 30rpx;
							font-weight: 500;
							color: #333;
							margin-bottom: 5rpx;
						}

						.time {
							font-size: 24rpx;
							color: #999;
						}
					}
				}

				.message-content {
					font-size: 30rpx;
					color: #333;
					line-height: 1.6;
					margin-bottom: 20rpx;
					word-break: break-all;
				}

				.message-actions {
					display: flex;
					margin-bottom: 15rpx;

					.action-item {
						display: flex;
						align-items: center;
						margin-right: 40rpx;
						color: #666;
						font-size: 26rpx;
						cursor: pointer;

						&:active {
							opacity: 0.7;
						}

						.icon-reply {
							margin-right: 8rpx;
							font-size: 28rpx;
						}
					}
				}

				.reply-list {
					background-color: #f9f9f9;
					border-radius: 10rpx;
					padding: 15rpx;
					margin-top: 15rpx;

					.reply-item {
						padding: 10rpx 0;
						border-bottom: 1px dashed #eee;

						&:last-child {
							border-bottom: none;
						}

						.reply-username {
							font-size: 28rpx;
							color: #3498db;
							font-weight: 500;
							display: inline;
						}

						.reply-content {
							font-size: 28rpx;
							color: #666;
							display: inline;
						}

						.reply-time {
							font-size: 24rpx;
							color: #ccc;
							margin-top: 5rpx;
							display: block;
						}
					}
				}
			}

			.empty-state {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 120rpx 0;
				color: #999;

				.empty-icon {
					font-size: 80rpx;
					margin-bottom: 30rpx;
				}

				.empty-text {
					font-size: 32rpx;
				}
			}
		}
	}

	.title-view {
		background-color: #f7f7f7;

		// background-color: red !important;
		.title-input {
			padding-left: 10px;
			background: #fff;
			margin: 5px 10px;
			padding: 5px;
			border-radius: 2px;
		}
	}

	/* 6. 复选框样式优化 */
	.checkbox-grid {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16rpx 20rpx;
	}

	// 清空按钮样式（若不使用内联样式，可在此处定义）
	.clear-btn {
		position: absolute;
		right: 15rpx;
		top: 50%;
		transform: translateY(-50%);
		color: #999;
		font-size: 24rpx;
		cursor: pointer;

		&:active {
			color: #666;
		}
	}

	// 调整标题栏右侧区域布局（若不使用内联样式，可在此处定义）
	.header-right {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}
</style>